<template>
  <el-form ref="cateUpdate" :model="cate" :rules="rules" label-width="120px">
    <el-form-item label="分类名" prop="cateName">
      <el-input v-model="cate.cateName" />
    </el-form-item>
    <el-form-item label="排序" prop="order">
      <el-input-number v-model="cate.order" />
    </el-form-item>
    <el-form-item label="状态" prop="cateStatus">
      <el-switch
        v-model="cate.cateStatus"
        :active-value="0"
        :inactive-value="1"
        inline-prompt
        active-text="显示"
        inactive-text="隐藏"
      />
    </el-form-item>
    <el-form-item label="父级分类" prop="pid">
      <el-tree-select
        v-model="cate.pid"
        check-strictly
        :data="[{ id: -1, cateName: '顶级分类' }, ...cates]"
        :props="{ label: 'cateName', value: 'id' }"
      />
    </el-form-item>
    <el-form-item label="分类图标">
      {{ fileList }}
      <el-upload
        action="/api/upload"
        :show-file-list="false"
        name="pic"
        accept=".jpg,.png,.gif"
        :on-success="uploadSuccess"
        :data="{ a: 10 }"
        :limit="1"
        :on-exceed="handleExceed"
        :before-upload="beforeUpload"
      >
        <el-button type="primary">选择图片</el-button>
      </el-upload>
      <img :src="cate.cateIcon" width="100" alt="" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getCateLists, fetchCateDetail, updateCate } from "@a/cate";

export default {
  props: {
    cateId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      rules: {
        cateName: [
          {
            required: true,
            message: "请输入分类名",
          },
        ],
      },
      cate: {
        cateName: "",
        order: 0,
        cateStatus: 0, // 0显示1隐藏
        pid: -1, // -1顶层分类
        cateIcon: "",
      },
      // 所有分类 作为 当前分类的父级分类选择
      cates: [],
    };
  },
  watch: {
    // 监听 传递 分类id 变化 获取分类详情
    cateId: {
      handler() {
        this.getCateDetail();
      },
      immediate: true,
    },
  },
  methods: {
    getCateDetail() {
      fetchCateDetail(this.cateId).then((res) => {
        if (res.data.code === 200) {
          this.cate = res.data.data;
        }
      });
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 5) {
        this.$message({
          type: "error",
          message: "上传图片大小不能超过 5MB!",
        });
        return false;
      } else {
        return true;
      }
    },
    uploadSuccess(res) {
      if (res.code === 200) {
        this.cate.cateIcon = res.data.url;
      }
    },
    onSubmit() {
      this.$refs.cateUpdate
        .validate()
        .then(() => {
          // 发送请求
          updateCate(this.cate).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 2000,
                onClose: () => {
                  this.$router.go(0);
                },
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "表单校验失败",
          });
        });
    },
    getCateLists() {
      getCateLists().then((res) => {
        if (res.data.code === 200) {
          this.cates = res.data.data;
        }
      });
    },
  },
  created() {
    this.getCateLists();
  },
};
</script>

<style lang="scss" scoped></style>
